import React, {Component} from 'react';
import {Carousel, ListView} from 'antd-mobile';

const data = [
    {
        img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
        title: 'Meet hotel',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
        img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
        title: 'McDonald\'s invites you',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
    {
        img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
        title: 'Eat the week',
        des: '不是所有的兼职汪都需要风吹日晒',
    },
];

class Home extends Component {
    state = {
        hotActivityData: [require('../images/home-01.jpg'), require('../images/home-01.jpg'), require('../images/home-01.jpg')],
        // data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    }

    render() {
        const {hotActivityData} = this.state;

        return (
            <div className="home">
                <h2>我的营养计划</h2>
                <p className="date">03.01&nbsp;&nbsp;&nbsp;周日</p>
                <div className="today-rmd">
                    <h3>今日早餐推荐</h3>
                    <div className='scroll-x-wrapper'>
                        <div className="scroll-x">
                            <ul>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                                <li>
                                    <span className="img"><img src={require('../images/today-rmd-01.jpg')}
                                                               alt=""/></span>
                                    <span className="name">鸡蛋</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a href="" className="more">
                        <i className="icon anticon">&#xe61f;</i>
                        您需要的都在这里
                    </a>
                    <div className="clock">
                        <h4>早餐打卡</h4>
                        <p>记录健康饮食</p>
                        <i className="icon anticon">&#xe627;</i>
                    </div>
                </div>
                <div className="hot-activity">
                    <h3 className="title">
                        <a href="" className="more">更多 <i className="icon anticon">&#xe61f;</i></a>
                        <span>热门活动</span>
                    </h3>
                    <Carousel className="space-carousel"
                              frameOverflow="visible"
                              dots={false}
                              cellSpacing={10}
                              autoplay={false}
                              infinite={false}
                              beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                              afterChange={index => this.setState({slideIndex: index})}
                    >
                        {hotActivityData.map((val, index) => (
                            <a
                                key={val}
                                href="http://www.alipay.com"
                            >
                                <img
                                    src={val}
                                    alt=""
                                    style={{width: '100%', verticalAlign: 'top'}}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({imgHeight: 'auto'});
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                </div>
                <div>
                    {/*<ListView*/}
                        {/*ref={el => this.lv = el}*/}
                        {/*dataSource={this.state.dataSource}*/}
                        {/*renderHeader={() => <span>header</span>}*/}
                        {/*renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>*/}
                            {/*{this.state.isLoading ? 'Loading...' : 'Loaded'}*/}
                        {/*</div>)}*/}
                        {/*renderSectionHeader={sectionData => (*/}
                            {/*<div>{`Task ${sectionData.split(' ')[1]}`}</div>*/}
                        {/*)}*/}
                        {/*renderBodyComponent={() => <MyBody/>}*/}
                        {/*renderRow={row}*/}
                        {/*renderSeparator={separator}*/}
                        {/*style={{*/}
                            {/*height: this.state.height,*/}
                            {/*overflow: 'auto',*/}
                        {/*}}*/}
                        {/*pageSize={4}*/}
                        {/*onScroll={() => {*/}
                            {/*console.log('scroll');*/}
                        {/*}}*/}
                        {/*scrollRenderAheadDistance={500}*/}
                        {/*onEndReached={this.onEndReached}*/}
                        {/*onEndReachedThreshold={10}*/}
                    {/*/>*/}
                </div>
            </div>
        )
    }
}

export default Home;